<template>
    <HeaderModule></HeaderModule>

    <div class="container">
        <el-container>
            <!-- 左边部分：侧边栏 -->
            <el-aside class="aside">
                <!-- 左一 -->
                <el-card class="navigation-first">
                    <img class="avatar" src="./images/01.jpg" />
                    <div class="name">
                        <p class="name1">疯狂输入</p>
                        <p class="grade-p">
                            <i class="grade-i">Lv.1</i>
                        </p>
                    </div>
                    <div class="underName">
                        <div class="concern">
                            <p class="concern-num">0</p>
                            <p class="concern-p">关注</p>
                        </div>
                        <div class="fan">
                            <p class="concern-num">0</p>
                            <p class="concern-p">粉丝</p>
                        </div>
                    </div>
                </el-card>
                <!-- 左二 -->
                <el-card class="navigation-second">
                    <p class="navigation-item" @click="toDynamics">资源动态</p>
                </el-card>
                <!-- 左三 -->
                <el-card class="navigation-third">
                    <div class="navigation-third-block">
                        <div class="navigation-third-item">
                            <p class="navigation-item" @click="toVip(index)" 
                                v-for="(item,index) in 1">我的会员</p>
                        </div>

                    </div>
                </el-card>
                <!-- 左四 -->
                <el-card class="navigation-forth">
                    <div class="navigation-third-block">
                        <div class="navigation-third-item">
                            <p class="navigation-item" @click="toInformation">我的资料</p>
                        </div>
                    </div>
                </el-card>
            </el-aside>
            <router-view></router-view>
            <!-- 动态资源 -->
            <!-- <DynamicResources></DynamicResources> -->
            <!-- 我的资料 -->
            <!-- <MyInformation></MyInformation> -->
            <!-- 我的会员 -->
            <!-- <MyVip></MyVip> -->
        </el-container>
  
    </div>
    <FooterModule></FooterModule>



</template>

<script setup lang="ts">
import { ref } from 'vue'
import router from '../../router/index'
import DynamicResources from './DynamicResources/index.vue'
import MyInformation from './MyInformation/index.vue'
import MyVip from './MyVip/index.vue'
const toDynamics = () => {
    router.push({
        path: '/my/dynamicresources'
    })
}
const num = ref(0)

const toVip = (index: number) => {
    num.value = index
    router.push({
        path: '/my/myvip'
    })
}
const toInformation = () => {
    router.push({
        path: '/my/myInformation'
    })
}
</script>

<style scoped>
.el-card /deep/ .el-card__body {
    padding: 0;
}

.container {
    width: 1200px;
    margin: 20px auto;
    /* background-color: aquamarine; */
}

.aside {
    width: 170px
}

.navigation-first {
    width: 168px;
    height: 240px;
    margin-bottom: 10px;
    padding: 0;
    text-align: center;
}

.navigation-second {
    height: 50px;
    padding: 5px 0;
    margin-bottom: 10px
}

.navigation-third {
    height: 250px;
    margin: 10px 0;
}

.navigation-forth {
    height: 50px;
}

/* 右边上边top */
.top {
    height: 72px;
}

.top-word {
    font-size: 14px;
    line-height: 72px;
    margin-left: 30px;
}

.main {
    width: 988px;
    height: 700px;
}

.main-table {
    margin: 10px 30px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 20px;
}

.name {
    width: 170px;
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: center;
}

.name1 {
    font-size: 16px;
    color: #111;
    margin-right: 5px;
}

.grade-i {
    font-size: 12px;
    color: white;
    background: linear-gradient(#ff289b, #ff43d0);
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 0 8px;
    display: inline-block !important;
    line-height: 16px;
    height: 16px;
}

.active {
    border-left: 4px solid #ff289b !important;
}

.underName {
    display: flex;
    /* border: 1px solid palevioletred; */
    padding: 18px 0;
    justify-content: space-evenly;
}

/* 关注和粉丝 */
.concern-num {
    color: #111;
    font-size: 16px;
    margin: 0 0 7px;
}

.concern-p {
    font-size: 14px;
    color: #7d8090;
    margin: 0 0 0;
}

/* 左侧资源动态 */
.navigation-item {
    font-size: 14px;
    color: #111;
    padding: 15px 21px;
    border-left: 4px solid transparent
}

/* .navigation-item::before{
    content: " ";
    position: absolute;
    width: 4px;
    height: 37px;
    left: 0;
    top: 50%;
} */
/* 左侧第三部分 */
.navigation-third-item {
    height: 50px;
}

/* main的header */
.main-container-header {
    margin: 20px 30px;
}
</style>